<template>
  <div class="mine">
    <div class="avatar">
      <img
        class="avatar-img"
        src="https://img-static.mihoyo.com/communityweb/upload/9b3ba0955f25001047823e3ad904c87d.png"
        style="width: 130px; height: 130px"
      />
      <a
        href="https://img-static.mihoyo.com/communityweb/upload/9b3ba0955f25001047823e3ad904c87d.png"
        ><img
          class="avatar-border"
          src="https://upload-bbs.mihoyo.com/upload/2021/09/24/119acfbde04e1bd44a82c0d245795b21_9202228775542194642.png"
      /></a>
    </div>
    <div class="user">{{ props.user }}</div>
    <button class="Kudos" @click="add">点赞</button>
    <div class="uid">uid:{{ props.uid }}</div>
    <div class="sign">
      签名:<input
        placeholder="这个人很懒，什么都没有留下哦~"
        class="sign-input"
      />
    </div>
    <div
      style="
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        margin-top: 1%;
        margin-left: calc(var(--avatar-size--) * 1.3);
      "
    ></div>
    <div style="display: flex">
      <div style="margin-left: calc(var(--avatar-size--) * 1.3); height: 30px">
        {{ number }}&nbsp;获赞
      </div>
      <div style="margin-left: 15px; height: 30px">
        {{ props.fan }}&nbsp;粉丝
      </div>
      <div style="margin-left: 15px; height: 30px">
        {{ props.concern }}&nbsp;关注
      </div>
      <router-link to="Postings">帖子</router-link>
      <router-view
        style="width: 500px; height: 500px; z-index: 99; bakcground-color: red"
        name="R1"
      />
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, ref } from "@vue/runtime-core";
const props = defineProps({
  user: {
    type: String,
    default: "默认用户",
  },
  uid: String,
  kudos: {
    type: Number,
    default: 0,
    readonly: false,
  },
  concern: {
    type: Number,
    default: 0,
  },
  fan: {
    type: Number,
    default: 0,
  },
});
const number = ref(props.kudos);
function add() {
  number.value++;
}
</script>

<style scoped>
.user {
  position: absolute;
  left: calc(var(--avatar-size--) * 1.3);
  top: calc(var(--avatar-size--) * 0.2);
  font-size: 17px;
}
.Kudos {
  position: absolute;
  left: calc(var(--avatar-size--) * 9);
  top: calc(var(--avatar-size--) * 0.2);
  background-color: rgb(7, 172, 255);
  border: none;
  border-radius: 5px;
  font-size: 17px;
  color: white;
}
.uid {
  position: absolute;
  left: calc(var(--avatar-size--) * 1.3);
  top: calc(var(--avatar-size--) * 0.4);
  font-size: 17px;
}
.avatar {
  width: calc(var(--avatar-size--) * 1.1);
  height: var(--avatar-size--);
  overflow: hidden;
}
.avatar-img {
  border-radius: 50%;
  margin-top: 6%;
  margin-left: 6%;
}
.avatar-border {
  width: calc(var(--avatar-size--) * 1.2);
  height: calc(var(--avatar-size--) * 1.2);
  position: absolute;
  display: block;
  top: 0%;
  left: 0%;
}
.mine {
  --avatar-size--: 120px;
  color: #000;
  font-size: 23px;
  position: absolute;
  text-align: left;
  line-height: 150%;
  height: 30%;
  width: 100%;
  background-color: rgb(250, 250, 239);
  background-size: 100%;
  background-position-y: 30%;
  overflow: hidden;
}
.sign {
  width: calc(var(--avatar-size--) * 4);
  display: flex;
  text-align: center;
  position: absolute;
  left: calc(var(--avatar-size--) * 1.3);
  top: calc(var(--avatar-size--) * 0.7);
  font-size: 17px;
}
.sign-input {
  background-color: rgba(255, 255, 255, 0.2);
  width: 60%;
  border-radius: 10px;
  border: none;
}
</style>
